<!-- 背景图上层粒子动画 -->
<template>
  <div id="large-header" class="large-header">
    <canvas id="demo-canvas"></canvas>
  </div>
</template>

<script lang="ts" setup name="">
  import TweenLite from 'gsap'
  let width,
    height,
    largeHeader,
    canvas,
    ctx,
    points,
    target,
    animateHeader = true

  function initHeader() {
    width = window.innerWidth
    height = window.innerHeight
    target = { x: width / 2, y: height / 2 }

    largeHeader = document.getElementById('large-header')
    largeHeader.style.height = height + 'px'

    canvas = document.getElementById('demo-canvas')
    canvas.width = width
    canvas.height = height
    ctx = canvas.getContext('2d')

    // create points
    points = []
    for (let x = 0; x < width; x = x + width / 10) {
      for (let y = 0; y < height; y = y + height / 10) {
        const px = x + (Math.random() * width) / 10
        const py = y + (Math.random() * height) / 10
        const p = { x: px, originX: px, y: py, originY: py }
        points.push(p)
      }
    }

    // for each point find the 5 closest points
    for (let i = 0; i < points.length; i++) {
      const closest = []
      const p1 = points[i]
      for (let j = 0; j < points.length; j++) {
        const p2 = points[j]
        if (!(p1 == p2)) {
          let placed = false
          for (let k = 0; k < 5; k++) {
            if (!placed) {
              if (closest[k] == undefined) {
                closest[k] = p2
                placed = true
              }
            }
          }

          for (let k = 0; k < 5; k++) {
            if (!placed) {
              if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
                closest[k] = p2
                placed = true
              }
            }
          }
        }
      }
      p1.closest = closest
    }

    // assign a circle to each point
    for (const i in points) {
      const c = new Circle(
        points[i],
        2 + Math.random() * 2,
        // 'rgba(255,255,255,0.3)'
        'red'
      )
      points[i].circle = c
    }
  }

  // Event handling
  function addListeners() {
    if (!('ontouchstart' in window)) {
      window.addEventListener('mousemove', mouseMove)
    }
    window.addEventListener('scroll', scrollCheck)
    window.addEventListener('resize', resize)
  }

  function mouseMove(e) {
    let posx = 0
    let posy = 0
    if (e.pageX || e.pageY) {
      posx = e.pageX
      posy = e.pageY
    } else if (e.clientX || e.clientY) {
      posx =
        e.clientX +
        document.body.scrollLeft +
        document.documentElement.scrollLeft
      posy =
        e.clientY + document.body.scrollTop + document.documentElement.scrollTop
    }
    target.x = posx
    target.y = posy
  }

  function scrollCheck() {
    if (document.body.scrollTop > height) animateHeader = false
    else animateHeader = true
  }

  function resize() {
    width = window.innerWidth
    height = window.innerHeight
    largeHeader.style.height = height + 'px'
    canvas.width = width
    canvas.height = height
  }

  // animation
  function initAnimation() {
    animate()
    for (const i in points) {
      shiftPoint(points[i])
    }
  }

  function animate() {
    if (animateHeader) {
      ctx.clearRect(0, 0, width, height)
      for (const i in points) {
        // detect points in range
        if (Math.abs(getDistance(target, points[i])) < 4000) {
          points[i].active = 0.3
          points[i].circle.active = 0.6
        } else if (Math.abs(getDistance(target, points[i])) < 20000) {
          points[i].active = 0.1
          points[i].circle.active = 0.3
        } else if (Math.abs(getDistance(target, points[i])) < 40000) {
          points[i].active = 0.02
          points[i].circle.active = 0.1
        } else {
          points[i].active = 0
          points[i].circle.active = 0
        }
        // if (Math.abs(getDistance(target, points[i])) < 4000) {
        //   points[i].active = 0.6
        //   points[i].circle.active = 0.8
        // } else if (Math.abs(getDistance(target, points[i])) < 20000) {
        //   points[i].active = 0.3
        //   points[i].circle.active = 0.5
        // } else if (Math.abs(getDistance(target, points[i])) < 40000) {
        //   points[i].active = 0.2
        //   points[i].circle.active = 0.2
        // } else {
        //   points[i].active = 0.1
        //   points[i].circle.active = 0.1
        // }

        drawLines(points[i])
        points[i].circle.draw()
      }
    }
    requestAnimationFrame(animate)
  }

  function shiftPoint(p) {
    TweenLite.to(p, 1 + 1 * Math.random() * 2, {
      x: p.originX - 50 + Math.random() * 100,
      y: p.originY - 50 + Math.random() * 100,
      onComplete: function () {
        shiftPoint(p)
      }
    })
  }

  // Canvas manipulation
  function drawLines(p) {
    if (!p.active) return
    for (const i in p.closest) {
      ctx.beginPath()
      ctx.moveTo(p.x, p.y)
      ctx.lineTo(p.closest[i].x, p.closest[i].y)
      ctx.strokeStyle = 'rgba(156,217,249,' + p.active + ')'
      ctx.stroke()
    }
  }

  function Circle(pos, rad, color) {
    const _this = this

    // constructor
    ;(function () {
      _this.pos = pos || null
      _this.radius = rad || null
      _this.color = color || null
    })()

    this.draw = function () {
      if (!_this.active) return
      ctx.beginPath()
      ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false)
      ctx.fillStyle = 'rgba(156,217,249,' + _this.active + ')'
      ctx.fill()
    }
  }

  // Util
  function getDistance(p1, p2) {
    return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)
  }

  // 初始化动画
  function init() {
    // Main
    initHeader()
    initAnimation()
    addListeners()
  }

  onMounted(() => {
    init()
  })

  // 屏幕变化时重新设置动画
  useWatchScreenResize(addListeners, false)
</script>

<style lang="less" scoped>
  /* Header */
  .large-header {
    // position: relative;
    // width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    // background: #333;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
  }
  #large-header {
    // background-image: url('https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/img/demo-1-bg.jpg');
  }
</style>
